<template>
  <article class="first-box">
    <div class="total-show">
      <div class="total-title">
        Chargers | <span style="color: #2fc888">LIVE</span>
      </div>
      <div class="total-bottom">
        <div class="total-bottom-left half">
          <h4>TOTAL</h4>
          <div class="allguns">99.2%</div>
          <div class="linear-gradient"></div>

          <div class="guns-desc">chargers online</div>
        </div>

        <div class="middle-line"></div>

        <div class="total-bottom-right half">
          <div class="right-options gray-color">
            <span> Chargers up </span>
            <span>342</span>
          </div>

          <div class="right-options red-color">
            <span>Charger down</span>
            <span>1</span>
          </div>

          <div class="right-options gray-color">
            <span>Total Chargers</span>
            <span>343</span>
          </div>
        </div>
      </div>
    </div>

    <div class="total-show">
      <div class="total-title">
        Ports | <span style="color: #00c5ca">LIVE</span>
      </div>
      <div class="total-bottom">
        <div class="total-bottom-left half">
          <h4>TOTAL</h4>
          <div class="allguns">21.3%</div>

          <div style="height: 6px">
            <span
              style="
                display: inline-block;
                width: 60px;
                height: 5px;
                background-color: #2fc888;
              "
            ></span>
            <span
              style="
                display: inline-block;
                width: 50px;
                height: 5px;
                background-color: #00b0f0;
              "
            ></span>
            <span
              style="
                display: inline-block;
                width: 20px;
                height: 5px;
                background-color: #680dad;
              "
            ></span>
            <span
              style="
                display: inline-block;
                width: 10px;
                height: 5px;
                background-color: #bf0001;
              "
            ></span>
          </div>

          <div class="guns-desc">ports utilised</div>
        </div>

        <div class="middle-line"></div>

        <div class="total-bottom-right half">
          <div class="right-options gray-color">
            <span>Ports available</span>
            <span style="color: #00c5ca">260</span>
          </div>
          <div class="right-options gray-color">
            <span>Ports in-use</span>
            <span style="color: #00b0f0">195</span>
          </div>
          <div class="right-options gray-color">
            <span>Ports reserved</span>
            <span style="color: #680dad">36</span>
          </div>
          <div class="right-options red-color">
            <span>Ports down</span>
            <span>2</span>
          </div>
        </div>
      </div>
    </div>

    <div class="total-show">
      <div class="total-title">
        Transactions | <span style="color: #04bdb5">LIVE</span>
      </div>
      <div class="total-bottom">
        <div class="total-bottom-left half">
          <h4>TOTAL</h4>
          <div class="allguns">179</div>
          <div class="linear-gradient"></div>

          <div class="guns-desc">transactions on-going</div>
        </div>

        <div class="middle-line"></div>

        <div class="total-bottom-right half">
          <div class="right-options gray-color">
            <span> Idling </span>
            <span>298</span>
          </div>

          <div class="right-options red-color">
            <span>In-queue</span>
            <span>16</span>
          </div>
        </div>
      </div>
    </div>
  </article>

  <div class="dashboard-pages">
    <div id="box4"></div>
    <div id="box5"></div>
    <div id="box6"></div>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs } from "vue";
import * as echarts from "echarts";
export default {
  setup() {
    const state = reactive({
      count: 0,
    
    });

    onMounted(() => {
      var myChart = echarts.init(document.getElementById("box4"));
      var myChart2 = echarts.init(document.getElementById("box5"));
      var myChart3 = echarts.init(document.getElementById("box6"));

      var option = {
        title: {
          text: "销量图",
        },
        tooltip: {},
        legend: {
          data: ["销量"],
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      };
      var option2 = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
              { value: 484, name: "Union Ads" },
              { value: 300, name: "Video Ads" },
            ],
          },
        ],
      };
      var  colors=['#5470C6', '#91CC75', '#EE6666']
      var option3 = {
        color:colors,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        grid: {
          right: "20%",
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: ["Evaporation", "Precipitation", "Temperature"],
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },
            // prettier-ignore
            data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "Evaporation",
            position: "right",
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[0],
              },
            },
            axisLabel: {
              formatter: "{value} ml",
            },
          },
          {
            type: "value",
            name: "Precipitation",
            position: "right",
            alignTicks: true,
            offset: 80,
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[1],
              },
            },
            axisLabel: {
              formatter: "{value} ml",
            },
          },
          {
            type: "value",
            name: "温度",
            position: "left",
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[2],
              },
            },
            axisLabel: {
              formatter: "{value} °C",
            },
          },
        ],
        series: [
          {
            name: "Evaporation",
            type: "bar",
            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
              3.3,
            ],
          },
          {
            name: "Precipitation",
            type: "bar",
            yAxisIndex: 1,
            data: [
              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
              2.3,
            ],
          },
          {
            name: "Temperature",
            type: "line",
            yAxisIndex: 2,
            data: [
              2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
            ],
          },
        ],
      };
      //   使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      myChart2.setOption(option2);
      myChart3.setOption(option3);

    });

    return {
      ...toRefs(state),
    };
  },
};
</script>

<style lang="scss" scoped>
.dashboard-pages {
  display: flex;
  align-items: center;
justify-content: space-between;
}

#box1 {
  width: 30%;
  height: 32vh;
  border: 1px solid #00bdb5;

}
#box2 {
  width: 30%;
  height: 32vh;
  border: 1px solid #00bdb5;
 
}
#box3 {
  width: 30%;
  height: 32vh;
  border: 1px solid #00bdb5;
  
}
#box4 {
  width: 24%;
  height: 32vh;
  border: 1px solid #00bdb5;

}
#box5 {
  width: 24%;
  height: 32vh;
  border: 1px solid #00bdb5;
 
}
#box6 {
  width: 50%;
  height: 32vh;
  border: 1px solid #00bdb5;
 
}
.first-box {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  margin-bottom: 36px;
 
}

.total-show {
  border-radius: 5px;
  width: 24%;
  height: 32vh;
  border: 5px solid #e4e4e4;
}
.total-show:nth-of-type(3){
  width: 50%;
}
.total-show-46 {
  border-radius: 5px;
  width: 48%;
  height: 200px;
  border: 5px solid #e4e4e4;
}

.total-title {
  font-size: 16px;
  font-weight: 500;
  background-color: #f6f6f6;
  height: 40px;
  line-height: 40px;
  box-sizing: border-box;
  padding-left: 16px;
}

.total-bottom {
  box-sizing: border-box;
  display: flex;
  padding: 16px;
  justify-content: space-between;
}
.total-bottom-left {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.half {
  width: 48%;
}

.half30 {
  width: 30%;
}

.half65 {
  width: 65%;
}

.middle-line {
  border: 1px solid gray;
  height: 120px;
}

.bg-guns {
  display: inline-block;
  width: 30px;
  height: 30px;
  /* assets/app/media/img/icons/guns.webp */
  background-image: none;
  background-size: 30px 30px;
  background-repeat: no-repeat;
  background-position: center;
}

.allguns {
  display: flex;
  font-size: 30px;
}

.allguns > span {
  display: inline-block;
  width: 50%;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
}

.progress-groups {
  display: flex;
}

.progress1 {
  width: 30%;
}

.progress2 {
  width: 60%;
}

.progress3 {
  width: 10%;
}

.guns-desc {
  margin-top: 12px;
  font-size: 16px;
}

.right-options {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.right-options:nth-last-of-type(1) {
  border: none;
}

.total-bottom-right {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.gray-color {
  color: gray;
}

.red-color {
  color: #cb2f2f;
}

.green-color {
  color: #00b050;
}

.blue-color {
  color: #00b0f0;
}

.needGreens {
  color: #36ca81;
}

.linear-gradient {
  width: 150px;
  height: 5px;
  background-image: linear-gradient(to right, #36ca81, white);
}
</style>